<template>
  <div class="demo">
    <div class="demo-title">列表</div>
    <div class="demo-content">
      <Switch :checked="!loading" @change="onChange" />
      <List item-layout="vertical" size="large" :data-source="listData">
        <template #renderItem="{ item }">
          <List.Item key="item.title">
            <template v-if="!loading" #actions>
              <span v-for="{ type, text } in actions" :key="type">
                <component :is="type" style="margin-right: 8px"></component>
                {{ text }}
              </span>
            </template>
            <template #extra>
              <img v-if="!loading" width="272" alt="logo" :src="imgSrc" />
            </template>
            <Skeleton :loading="loading" active avatar>
              <List.Item.Meta :description="item.description">
                <template #title>
                  <a :href="item.href">{{ item.title }}</a>
                </template>
                <template #avatar>
                  <Avatar :src="item.avatar" />
                </template>
              </List.Item.Meta>
              {{ item.content }}
            </Skeleton>
          </List.Item>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Avatar from '@sscd/avatar';
  import List from '@sscd/list';
  import Switch from '@sscd/switch';
  import Skeleton from '@sscd/skeleton';
  interface DataItem {
    href: string;
    title: string;
    avatar: string;
    description: string;
    content: string;
  }
  const imgSrc = 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png';
  const listData: DataItem[] = [];
  for (let i = 0; i < 3; i++) {
    listData.push({
      href: '/',
      title: `SSC+ Design part ${i}`,
      avatar: 'https://joeschmoe.io/api/v1/random',
      description:
        'SSC+ Design, a design language for background applications, is refined by SSC+ Design UED Team.',
      content:
        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    });
  }
  const loading = ref<boolean>(true);
  const actions = [
    { type: 'star-outlined', text: '156' },
    { type: 'like-outlined', text: '156' },
    { type: 'message-outlined', text: '2' },
  ];
  const onChange = (checked: boolean) => {
    loading.value = !checked;
  };
</script>
